<template>
  <div class="login">
    <div class="loginBox">
      <div class="main">
        <div class="top">
          {{ $t("reg-t1") }}
        </div>
        <div class="center">
          <el-form ref="form" :model="form" :rules="formRules" :label-width="localeCn ? '90px' : '140px'" :label-position="labelPosition">
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" type="password" clearable></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <div class="inputBox">
                <div class="inputLeft">
                  <el-input v-model="form.code" placeholder="请输入验证码" clearable></el-input>
                </div>
                <div class="inputRight">
                  <common-countdown-button ref="countDown" :autoCountDown="false" :loading="sending" :text="getSms" @on-click="sendSmsCodeFun" />
                </div>
              </div>
            </el-form-item>
            <el-button type="primary" class="btn-long disabled" v-if="!checked" @click="onSubmit">{{ $t("login-btn-reg") }}</el-button>
            <el-button type="primary" class="btn-long" @click="onSubmit" v-else>{{ $t("login-btn-reg") }}</el-button>
          </el-form>
        </div>
        <div class="bottom">
          <el-checkbox v-model="checked"
            >{{ $t("reg-tip-agree") }}<a :href="$t('foot-copyright.privacy')" target="_blank" class="span">{{ $t("reg-tip-agreement") }}</a></el-checkbox
          >
          <p class="p">
            <span
              >{{ $t("reg-tip-account") }}<span class="hand span" @click="go2Login">{{ $t("login-btn") }}</span></span
            >
            <a :href="localeCn ? '/' : '/en'" class="ml20">{{ $t("tip-home") }}</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mobileRegister, sendSmsCode } from "@/api/login";
import { isMobile,validateMobile, validatePassword } from "@/libs/validate";
export default {
  name: "register",
  head() {
    return {
      title: this.$store.state.seo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.$store.state.seo.description,
        },
        {
          hid: "keywords",
          name: "keywords",
          content: this.$store.state.seo.keywords,
        },
      ],
    };
  },
  computed: {
    labelPosition() {
      return this.isMobile ? "top" : "";
    },
  },
  data() {
    return {
      form: {
        code: "",
        email: "",
        mobile: "",
      },
      checked: false,
      loading: false,
      formRules: {
        code: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
          {
            validator: validateMobile,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            validator: validatePassword,
            trigger: "blur",
          }
        ],
      },
      getSms: "获取验证码",
      sending: false,
      errorCode: "",
    };
  },
  methods: {
    // 获取手机验证码
    sendSmsCodeFun() {
      if (!this.form.mobile) {
        this.$message.error(this.$t("reg-placeholder-mobile"));
        return;
      }
      if (!isMobile(this.form.mobile)) {
        this.$message.error(this.$t("reg-placeholder-mobile-format"));
        return;
      }
      this.sending = true;
      this.getSms = this.$t("tip-sending");
      this.invoke(sendSmsCode, this.form.mobile, {
        template: 1,
      }).then((res) => {
        this.getSms = this.$t("get-sms");
        this.sending = false;
        if (res && res.code == 200) {
          this.$message.success(this.$t("sended-success"));
          // 开始倒计时
          this.$refs.countDown.startCountDown();
        }
      });
    },
    onSubmit() {
      if (!this.checked) {
        this.$message.warning("请同意隐私政策后，进行账号注册");
        return;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.form.code) {
            this.errorCode = this.$t("reg-no-data-code");
            return;
          } else {
            this.errorCode = "";
          }
          this.loading = true;
          this.invoke(mobileRegister, this.form).then((res) => {
            this.loading = false;
            if (res && res.code == 200) {
              this.$message.success(this.$t("reg-success"));
              setTimeout(() => {
                let routeUrl = this.$router.resolve({
                  path: `/login`,
                });
                window.open(routeUrl.href, "_blank");
              }, 500);
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/images/loginBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .loginBox {
    $h: 50px;
    $fz: 20px;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;

    .main {
      padding: 78px 64px;
      background: #ffffff;

      .top {
        font-size: 30px;
        font-weight: 400;
        color: #4f4f4f;
        line-height: 1em;
        text-align: center;
        margin-bottom: 60px;
      }

      .center {
        :deep(.el) {
          &-form {
            &-item {
              &__label {
                color: #4f4f4f;
                font-size: $fz;
                line-height: $h;
              }
            }
          }

          &-input {
            &__inner {
              width: 450px;
              height: $h;
              border-radius: 0;
              border: 1px solid #cdcdcd;
              color: #333;
              font-size: $fz;
            }
          }
        }

        :deep(.btn-long) {
          width: 100%;
          margin: 0 auto;
          background-color: #e35191;
          display: block;
          height: $h;
          border-radius: 0;
          border: none;
          font-size: $fz;

          &.disabled {
            opacity: 0.5;
          }
        }

        :deep(.el-form-item) {
          margin-bottom: 30px;
        }

        .inputBox {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;

          .inputLeft {
            flex: 0 0 250px;
            width: 250px;

            :deep(.el-input__inner) {
              width: 250px;
            }
          }

          .inputRight {
            $w: 170px;
            flex: 0 0 $w;
            width: $w;

            :deep(.el-button) {
              width: $w;
              height: $h;
              background-color: #659bfd;
              border-color: #659bfd;
              color: #ffffff;
              border-radius: 0;
              font-size: $fz;
            }
          }
        }

        .btn-long {
          margin-top: 40px;
        }
      }

      .bottom {
        font-size: $fz;
        font-weight: 400;
        color: rgba(25, 30, 51, 0.5);
        line-height: 1;
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .em {
          color: #659bfd;
        }

        .span {
          color: #d53b76;
        }

        :deep(.el) {
          &-checkbox {
            font-size: $fz;

            &__inner {
              width: $fz;
              height: $fz;

              &::after {
                height: 10px;
                left: 7px;
              }
            }

            &__label {
              font-size: $fz;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media (min-width: 800px) and (max-width: 1570px) {
  .login {
    .loginBox {
      .main {
        padding: 62px 52px;

        .top {
          font-size: 22px;
          margin-bottom: 40px;
        }

        .center {
          :deep(.el-input__inner) {
            height: 45px;
            font-size: 16px;
          }

          :deep(.el) {
            &-input {
              &__inner {
                width: 350px;
              }
            }
          }

          :deep(.el-form-item) {
            margin-bottom: 20px;
          }

          .inputBox {
            .inputLeft {
              $w: 200px;
              flex: 0 0 $w;
              width: $w;

              :deep(.el-input__inner) {
                width: $w;
              }
            }

            .inputRight {
              $w: 130px;
              flex: 0 0 $w;
              width: $w;

              :deep(.el-button) {
                width: 130px;
                height: 45px;
                font-size: 16px;
              }
            }
          }

          .btn-long {
            margin-top: 20px;
          }
        }
      }

      .bottom {
        font-size: 16px !important;
        margin-top: 20px !important;

        :deep(.el-checkbox__label) {
          font-size: 16px !important;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media (max-width: 750px) {
  .login {
    background-size: cover;

    .loginBox {
      .main {
        padding: 30px 20px;

        .top {
          font-size: 18px;
          margin-bottom: 20px;
        }

        .center {
          .el-form-item {
            margin-bottom: 0px;
          }

          :deep(.el-form-item__label) {
            font-size: 12px;
            width: 60px !important;
            box-sizing: border-box;
            padding-right: 0;
            float: unset;
          }

          :deep(.el-form-item__content) {
            margin-left: 0px !important;
          }

          :deep(.el-input__inner) {
            width: 100%;
            margin-bottom: 0;
            height: 40px;
            font-size: 14px;
          }

          .inputBox {
            .inputLeft {
              flex: 0 0 180px;
              width: 180px;

              :deep(.el-input__inner) {
                width: 160px;
              }
            }

            .inputRight {
              flex: 0 0 110px;
              width: 110px;

              :deep(.el-button) {
                width: 110px;
                height: 40px;
                font-size: 14px;
              }
            }
          }

          .btn-long {
            font-size: 14px;
            height: 40px;
          }
        }

        .bottom {
          flex-direction: column;
          align-items: flex-start;
          font-size: 14px !important;
          margin-top: 20px !important;

          :deep(.el-checkbox__label) {
            font-size: 14px !important;
          }

          .p {
            width: 100%;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
